<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>好用便签</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <link rel="stylesheet" href="../common/style/vars.css">
    <script src="../common/cdn/confetti.js"></script>
    <style>
      /* 滚动槽 */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      ::-webkit-scrollbar-track {
        border-radius: 3px;
        background: transparent;
        -webkit-box-shadow: inset 0 0 5px transparent;
      }
      /* 滚动条滑块 */
      ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: rgba(0,0,0,0.12);
        -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
      }

      :root{
        --bg-transparent: 1;
      }

      .november-theme {
          --theme-bg: rgb(210, 213, 220);
          --theme-week-bg: rgb(104, 109, 131);
          --theme-week-color: rgb(255, 255, 255);
          --theme-week-dag-color: rgb(106, 110, 128);
          --theme-select-day-bg: rgb(88, 94, 122);
          /* --theme-week-line-top:  */
        }

        .january-theme {
          --theme-bg: rgb(202, 209, 235);
          --theme-week-bg: rgb(85, 104, 163);
          --theme-week-color: rgb(255, 255, 255);
          --theme-week-dag-color: rgb(94, 104, 147);
          --theme-select-day-bg: rgb(71, 81, 129);
        }

        .february-theme {
          --theme-bg: rgb(250, 219, 217);
          --theme-week-bg: rgb(217, 111, 124);
          --theme-week-color: rgb(255, 255, 255);
          --theme-week-dag-color: rgb(230, 143, 153);
          --theme-select-day-bg: rgb(216, 96, 110);
        }


        .march-theme {
          --theme-bg: rgb(251, 226, 186);
          --theme-week-bg: rgb(198, 78, 67);
          --theme-week-color: rgb(255, 255, 255);
          --theme-week-dag-color: rgb(212, 106, 96);
          --theme-select-day-bg: rgb(199, 62, 49);
        }


        .april-theme {
          --theme-bg: rgb(191, 224, 205);
          --theme-week-bg: rgb(74, 119, 86);
          --theme-week-color: rgb(255, 255, 255);
          --theme-week-dag-color: rgb(93, 131, 103);
          --theme-select-day-bg: rgb(58, 119, 74);
        }

        .may-theme {
          --theme-bg: rgb(188, 205, 233);
          --theme-week-bg: rgb(86, 104, 166);
          --theme-week-color: rgb(255, 255, 255);
          --theme-week-dag-color: rgb(107, 123, 182);
          --theme-select-day-bg: rgb(68, 89, 163);
        }

        .june-theme {
          --theme-bg: rgb(244, 179, 173);
          --theme-week-bg: rgb(209, 85, 77);
          --theme-week-color: rgb(255, 255, 255);
          --theme-week-dag-color: rgb(218, 110, 102);
          --theme-select-day-bg: rgb(211, 70, 59);
        }

        .july-theme {
          --theme-bg: rgb(246, 201, 221);
          --theme-week-bg: rgb(216, 92, 142);
          --theme-week-color: rgb(255, 255, 255);
          --theme-week-dag-color: rgb(223, 119, 160);
          --theme-select-day-bg: rgb(212, 66, 125);
        }


        .august-theme {
          --theme-bg: rgb(210, 204, 206);
          --theme-week-bg: rgb(93, 94, 96);
          --theme-week-color: rgb(255, 255, 255);
          --theme-week-dag-color: rgb(118, 122, 129);
          --theme-select-day-bg: rgb(74, 77, 83);
        }


        .september-theme {
          --theme-bg: rgb(187, 213, 240);
          --theme-week-bg: rgb(51, 89, 134);
          --theme-week-color: rgb(255, 255, 255);
          --theme-week-dag-color: rgb(80, 115, 158);
          --theme-select-day-bg: rgb(37, 75, 121);
        }

        .october-theme {
          --theme-bg: rgb(223, 231, 244);
          --theme-week-bg: rgb(120, 148, 196);
          --theme-week-color: rgb(255, 255, 255);
          --theme-week-dag-color: rgb(143, 167, 209);
          --theme-select-day-bg: rgb(86, 117, 172);
        }


        .december-theme {
          --theme-bg: rgb(189, 225, 215);
          --theme-week-bg: rgb(44, 166, 171);
          --theme-week-color: rgb(255, 255, 255);
          --theme-week-dag-color: rgb(69, 180, 184);
          --theme-select-day-bg: rgb(24, 155, 160);
        }

      body{
        transition: all 0.5s linear;
        color: #000;
      }

      .view {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
      }

      .tags-box{
        width: 70px;
        height: calc(100% - 60px);
        margin-top: 30px;
        overflow-y: auto;
        overflow-x: hidden;
      }


      .tags-box::-webkit-scrollbar {
          width: 0;
          height: 0;
        }
      .tags-box::-webkit-scrollbar-track {
        border-radius: 3px;
        background: transparent;
        -webkit-box-shadow: inset 0 0 5px transparent;
      }
        /* 滚动条滑块 */
      .tags-box ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: rgba(0,0,0,0);
        -webkit-box-shadow: inset 0 0 10px transparent;
      }

      .tags-box.left .tag{
        width: 40px;
        padding: 5px;
        margin: 8px 0;
        margin-left: 30px;
        background-color: var(--theme-bg);
        border-radius: 3px 0 0 14px;
        white-space: nowrap;
        overflow: hidden;
      }

      .tags-box.left .tag.tag-active{
        width: 60px;
        margin-left: 10px;
      }

      .tags-box.right .tag{
        width: 40px;
        padding: 5px;
        margin: 8px 0;
        margin-right: 30px;
        background-color: var(--theme-bg);
        border-radius: 0 3px 14px 0;
        white-space: nowrap;
        overflow: hidden;
      }

      .tags-box.right .tag.tag-active{
        width: 60px;
        margin-right: 10px;
      }

      .haoyong-box {
        position: relative;
        height: 100%;
        flex: 1;
        border-radius: 5px;
        overflow: hidden;
        background-color: var(--theme-bg);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      }

      .haoyong-header{
        width: 100%;
        height: 30px;
        background-color: var(--theme-bg);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        position: relative;
      }

      .notes-name{
        max-width: 45%;
        padding: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        outline: none;
      }

      .notes-name::-webkit-scrollbar {
          width: 0;
          height: 0;
        }
      .notes-name::-webkit-scrollbar-track {
        border-radius: 3px;
        background: transparent;
        -webkit-box-shadow: inset 0 0 5px transparent;
      }
        /* 滚动条滑块 */
      .notes-name ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: rgba(0,0,0,0);
        -webkit-box-shadow: inset 0 0 10px transparent;
      }

      .notes-name:focus{
        width: 40%;
        overflow-x: auto;
        text-overflow: unset;
        border: 1px solid rgba(255, 255, 255, 0.5);
      }

      body:hover .function{
        top: 0;
        transition: all 0.3s;
      }

      .function{
        position: absolute;
        display: flex;
        align-items: center;
        height: 100%;
        transition: all 0.3s 0.5s;
        right: 10px;
        top: -30px;
      }

      .function .fun-btn{
        padding: 3px;
      }

      .function .btn-move{
        display: none;
      }

      .function.todo-f .btn-move{
        display: block;
      }

      .function icon-svg{
        margin-left: 5px;
        cursor: pointer;
        font-size: 16px;
      }
      .btn-theme,
      .btn-add{
        position: relative;
      }

      .popup-new-box{
        position: absolute;
        right: 0;
        top: 100%;
        width: 90px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        background-color: var(--theme-bg);
        z-index: 10;
        border-radius: 3px;
        display: none;
      }

      .popup-new-item{
        padding: 5px;
      }

      .popup-new-item:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }

      .popup-new-item ~ .popup-new-item{
        border-top: 1px solid rgba(255, 255, 255, 0.2);
      }

      .theme-menu{
        position: absolute;
        right: 0;
        top: 100%;
        width: 110px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        background-color: var(--theme-bg);
        z-index: 999 !important;
        border-radius: 3px;
        flex-wrap: wrap;
        padding: 5px;
        display: none;
      }
      .theme-item{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        cursor: pointer;
        margin: 5px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
      }

      .theme-item:hover {
        transform: scale(1.2);
      }

      .hanyong-main{
        width: 100%;
        height: calc(100% - 30px);
      }

      .icon-svg-active{
        background-color: rgba(0,0,0,0.12);
      }

      .size-horn{
        position: fixed;
        right: 70px;
        bottom: 0;
        font-size: 20px;
        color: rgba(126, 123, 123, 0.3);
        cursor: nwse-resize;
      }

      .cover-box{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9;
        display: none;
      }

      .tags-menu{
        position: fixed;
        width: 90px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        background-color: var(--theme-bg);
        border-radius: 3px;
        z-index: 9;
        left: 0;
        top: 0;
        display: none;
      }

      .tags-menu > div{
        padding: 5px;
      }

      .tags-menu > div:hover{
        background-color: rgba(0, 0, 0, 0.05);
      }

      .tags-menu div ~ div{
        border-top: 1px solid rgba(255, 255, 255, 0.2);
      }

      
    </style>
  </head>
  <body>
    <div class="view">
      <div class="tags-box left" draggable="true"></div>
      <div class="haoyong-box">
        <div class="haoyong-header">
          <div class="notes-name">便签</div>
          <div class="function">
            <div class="btn-theme fun-btn">
              <icon-svg name="theme"></icon-svg>
              <div class="theme-menu"></div>
            </div>
            <div class="btn-add fun-btn">
              <icon-svg name="add"></icon-svg>
              <div class="popup-new-box">
                <div class="popup-new-item text-new">普通便签</div>
                <div class="popup-new-item todo-new">待办便签</div>
                <div class="popup-new-item time-new">时间轴便签</div>
              </div>
            </div>
            <div class="btn-move fun-btn">
              <icon-svg name="move" ></icon-svg>
            </div>
          </div>
        </div>
        <div class="hanyong-main">
          <todo-notes></todo-notes>
          <time-notes></time-notes>
          <text-notes></text-notes>
        </div>
      </div>
      <div class="tags-box right"></div>
    </div>
    <div class="size-horn"><icon-svg name="righthorn"></icon-svg></div>
    <div class="cover-box"></div>
    <div class="tags-menu">
      <!-- <div class="rename-item">重命名</div> -->
      <div class="delete-item">删除</div>
      <!-- <div>关闭</div> -->
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <!-- <script type="module" src="../common/js/move.js"></script> -->
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module" src="./popup.js"></script>
  <script type="module" tag=".haoyong-box" src="./size_horn.js"></script>
  <script type="module">
    import { nanoid } from "../common/cdn/nanoid.js";
    import IconSvg from "../components/IconSvg/IconSvg.js";
    import TodoNotes from './component/TodoNotes.js'
    import TimeNotes from './component/TimeNotes.js'
    import TextNotes from './component/TextNotes.js'
    customElements.define("icon-svg", IconSvg);
    customElements.define("todo-notes", TodoNotes);
    customElements.define("time-notes", TimeNotes);
    customElements.define("text-notes", TextNotes);



    let data = {
      list: [
        {
          id: 'haoyong',
          type: 'text-notes',
          name: '普通便签',
          theme: 'july-theme',
          show: true,
          data: ''
        },
      ],
      id: 'haoyong',
    }
    let initData = {
      list: [
        {
          id: 'haoyong',
          type: 'text-notes',
          name: '普通便签',
          theme: 'july-theme',
          show: true,
          data: '<div>1.单击直接进入编辑</div><div>2.文字加粗/ 颜色等都在窗口底部</div><div>3.双击顶部标题或侧边小标签可重命名</div><div>4.拖动窗口到桌面边缘可贴边隐藏</div><div>5.按住侧边小标签可上下拖动排序</div>'
        },
        {
          id: 'haoyong1',
          type: 'todo-notes',
          name: '待办便签',
          theme: 'september-theme',
          show: true,
          data: {
            unfinished: [
              {
                content: '1.新增待办：双击某条待办后按Enter键，或双击底部栏目位置',
                remind: false,
                remindTime: 0,
                repeat: {
                  type: '',
                  days: []
                },
              },
              {
                content: '2.点击右上角移动按钮，可对待办进行拖动',
                remind: false,
                remindTime: 0,
                repeat: {
                  type: '',
                  days: []
                },
              },
              {
                content: '3.拖动便签到桌面边缘可贴边隐藏',
                remind: false,
                remindTime: 0,
                repeat: {
                  type: '',
                  days: []
                },
              },
              {
                content: '4.点侧边" + "图标可新增一张便签',
                remind: false,
                remindTime: 0,
                repeat: {
                  type: '',
                  days: []
                },
              },
            ],
            completed: []
          }
        },
        {
          id: 'haoyong2',
          type: 'time-notes',
          name: '时间轴便签',
          theme: 'april-theme',
          show: true,
          data: [
            {
                "content": "新增一条：双击底部栏目位置",
                "time": 1725347340000,
                "remind": false
            },
            {
                "content": "时间轴：按时间线，记录过去，规划未来",
                "time": 1725347280000,
                "remind": false
            }
          ]
        },
      ],
      id: 'haoyong'
    }
    window.getData = () => data;

    let tagMenuIndex;
    let mobileMode = false;

    if (window.ipcRenderer) {
      window.ipcRenderer.on('init', (event, res) => {
       data = res || initData;

       renderView()
      });

    
    }

    const notesNameEl = document.querySelector('.notes-name');
    const todoNotesEl = document.querySelector('todo-notes');
    const timeNotesEl = document.querySelector('time-notes');
    const textNotesEl = document.querySelector('text-notes');
    const iconSvgMove = document.querySelector('.btn-move');
    const coverEl = document.querySelector('.cover-box');
    const btnAddEl = document.querySelector('.btn-add');
    const popupNewBoxEl = document.querySelector('.popup-new-box');
    const todoNewEl = document.querySelector('.todo-new');
    const timeNewEl = document.querySelector('.time-new');
    const textNewEl = document.querySelector('.text-new');
    const tagsMenuEl = document.querySelector('.tags-menu');
    const renameItemEl = document.querySelector('.rename-item');
    const deleteItemEl = document.querySelector('.delete-item');
    const btnThemeEl = document.querySelector('.btn-theme');
    const themeMenuEl = document.querySelector('.theme-menu');
    const functionEl = document.querySelector('.function');

    
 

    const initTheme = () => {
      let themeList = [
      {
        name: 'january-theme',
        themeColor: '#cad1eb'
      },
      {
        name: 'february-theme',
        themeColor: '#fadbd9'
      },
      {
        name: 'march-theme',
        themeColor: '#fbe2ba'
      },
      {
        name: 'april-theme',
        themeColor: '#bfe0cd'
      },
      {
        name: 'may-theme',
        themeColor: '#bccde9'
      },
      {
        name: 'june-theme',
        themeColor: '#f4b3ad'
      },
      {
        name: 'july-theme',
        themeColor: '#f6c9dd'
      },
      {
        name: 'august-theme',
        themeColor: '#d2ccce'
      },
      {
        name: 'september-theme',
        themeColor: '#bbd5f0'
      },
      {
        name: 'october-theme',
        themeColor: '#dfe7f4'
      },
      {
        name: 'november-theme',
        themeColor: '#d2d5dc'
      },
      {
        name: 'december-theme',
        themeColor: '#bde1d7'
      },
    ]
      
      const renderThemePop = () => {
        themeMenuEl.innerHTML = themeList.map(item => `<div class="theme-item" style="background-color:${item.themeColor}" data-theme="${item.name}"></div>`).join('')
        document.querySelector('icon-svg[name=theme]').onclick = e => {
          e.stopPropagation();
          themeMenuEl.style.display = 'flex';
          coverEl.style.display = 'block';
        }

        themeMenuEl.onclick = e => {
          if (e.target.classList.contains('theme-item')) {
            const theme = e.target.dataset.theme;
            document.body.className = theme;
            let currentIndex = data.list.findIndex(item => item.id === data.id);
            data.list[currentIndex].theme = theme;
            window.renderTags();
            closeCover();
          }
        }
      }
    
      const randomColor = () => {
        let randomNum = Math.floor(Math.random() * themeList.length)
        return themeList[randomNum].name;
      }

      return { renderThemePop, randomColor }
    }

    const {renderThemePop, randomColor } = initTheme();
    renderThemePop();
    const createTextNotes = () => {
      let theme = randomColor();
      let id = nanoid();
      let length = data.list.length + 1;
      let name = '命名' + (length < 10 ? '0' + length : length);
      data.id = id;
      data.list.push({
        id,
        type: 'text-notes',
        name,
        theme,
        show: true,
        data: ''
      });
      renderView();
    }

    const createTodoNotes = () => {
      let theme = randomColor();
      let id = nanoid();
      let length = data.list.length + 1;
      let name = '命名' + (length < 10 ? '0' + length : length);
      data.id = id;
      data.list.push({
        id,
        type: 'todo-notes',
        name,
        theme,
        show: true,
        data: {
          unfinished: [],
          completed: []
        }
      });
      renderView();
    }

    const createTimeNotes = () => {
      let theme = randomColor();
      let id = nanoid();
      let length = data.list.length + 1;
      let name = '命名' + (length < 10 ? '0' + length : length);
      data.id = id;
      data.list.push({
        id,
        type: 'time-notes',
        name,
        theme,
        show: true,
        data: []
      });
      renderView();
    }

    window.renderTags = (type = 'left') => {
      let tagBoxEl;
      const tagsBoxEl = document.querySelectorAll('.tags-box');
      tagsBoxEl.forEach(item=>item.innerHTML = '')
      if(type === 'left'){
        tagBoxEl = tagsBoxEl[0];
      }else{
        tagBoxEl = tagsBoxEl[1];
      }

      tagBoxEl.innerHTML = data.list.map((item, index)=>{
        let bool = item.id === data.id;
        if(bool)tagMenuIndex = index;
        return `<div class="tag ${item.theme} ${bool ? 'tag-active' : ''}" data-index="${index}" draggable="true" data-id="${item.id}">${item.name}</div>`
      }).join('');

      if(data.list.length === 1){
        deleteItemEl.style.cursor = 'not-allowed';
      }else{
        deleteItemEl.style.cursor = 'pointer';
      }

      tagBoxEl.onclick = (e) => {
        let target = e.target;
        if (target.classList.contains('tag')) {
          data.id = target.getAttribute('data-id');
          tagMenuIndex = target.dataset.index;
          renderView();
          if(window.sendSaveData){
              window.sendSaveData(data);
          }
        }
      }

      let arr = [...tagBoxEl.querySelectorAll('.tag')]
      arr.forEach((tag,index) => {
        tag.oncontextmenu = function (e) {
          e.preventDefault();
          e.stopPropagation();
          tagMenuIndex = index;
          tagsMenuEl.style.display = 'block';
          coverEl.style.display = 'block';
          
          tagsMenuEl.style.left = e.clientX + 'px';
          tagsMenuEl.style.top = e.clientY + 'px';

        }
      })

      tagBoxEl.ondragstart = function (e) {
        e.stopPropagation();
        if(e.target.classList.contains('tag')){
          let index = e.target.dataset.index;
          let str = JSON.stringify({
            index: parseInt(index),
            y: e.clientY
          });
          
          e.dataTransfer.setData('startInfo', str);
          tagBoxEl.style.backgroundColor = 'rgba(0,0,0,.02)';
        }
      };

      tagBoxEl.ondragover = (e)=>{
        e.stopPropagation();
        e.preventDefault();
      }
      let overInfo = null;
      tagBoxEl.ondragenter = (e)=>{
        if(e.target.classList.contains('tag')){
          let index = e.target.dataset.index;
          overInfo = {
            index,
            y: e.clientY
          }
        }
      }

      tagBoxEl.ondrop = (e)=>{
        e.preventDefault();
        e.stopPropagation();
        // console.log('drop',e.clientY);
        tagBoxEl.style.backgroundColor = 'rgba(0,0,0,0)';

        let startInfo = JSON.parse(e.dataTransfer.getData('startInfo'));

        let endInfo = {
          index: e.target.dataset.index,
          y: e.clientY - 30
        };

        if(startInfo.y < endInfo.y){

          let startIndex = startInfo.index;
          let endIndex;
          if(endInfo.index === undefined){
            
            endIndex = parseInt(endInfo.y / (26 + 5));
          }else {
            endIndex = startIndex + 1 === parseInt(endInfo.index) ? parseInt(endInfo.index) + 1 : parseInt(endInfo.index);
          }

          // let value = JSON.parse(JSON.stringify());
          // console.log(value);
          
          // 插入
          data.list.splice(endIndex, 0, data.list[startIndex]);
          data.list.splice(startIndex, 1);
          
        }

        if(startInfo.y > endInfo.y){
          let startIndex = startInfo.index;
          let endIndex;
          if(endInfo.index === undefined){
            
            endIndex = parseInt(endInfo.y / (26 + 5));
          }else {
            endIndex = parseInt(endInfo.index);
          }
          let value = data.list.splice(startIndex, 1);
          data.list.splice(endIndex, 0, ...value);

        }

        console.log(data.list);
        
       
        renderTags();
      }
    }


    const renderView = () => {
      window.renderTags();
      closeCover();
      let value = data.list.find(item => item.id === data.id);
      if(!value)return;
      notesNameEl.innerText = value.name;
      document.body.classList = value.theme;
      todoNotesEl.style.display = 'none';
      timeNotesEl.style.display = 'none';
      textNotesEl.style.display = 'none';
      
      switch (value.type) {
        case 'todo-notes':
          functionEl.className = 'function todo-f';
          todoNotesEl.style.display = 'block';
          todoNotesEl.setAttribute('value', JSON.stringify(value.data));
          break;

        case 'time-notes':
          functionEl.className = 'function time-f';
        // timeNotesEl.setAttribute('value', JSON.stringify(value.data));
          timeNotesEl.style.display = 'block';
          timeNotesEl.setAttribute('value', JSON.stringify(value.data));
          break;

        case 'text-notes':
          functionEl.className = 'function text-f';
          textNotesEl.style.display = 'block';
          textNotesEl.setAttribute('value', value.data);
          break;
      
        default:
          break;
      }
    }


    iconSvgMove.onclick = function () {
      mobileMode = !mobileMode;
      if (mobileMode) {
        this.classList.add('icon-svg-active');
        todoNotesEl.setAttribute('mobile-mode', 'true');
      } else {
        this.classList.remove('icon-svg-active');
        todoNotesEl.setAttribute('mobile-mode', 'false');
      }
    }

    btnAddEl.onclick = function (e) {
      e.stopPropagation();
      popupNewBoxEl.style.display = 'block';
      coverEl.style.display = 'block';
    }

    // 关闭
    const closeCover = () => {
      popupNewBoxEl.style.display = 'none';
      coverEl.style.display = 'none';
      tagsMenuEl.style.display = 'none';
      themeMenuEl.style.display = 'none';
    }
    
    coverEl.onmousedown = function (e) {
      e.stopPropagation();
      e.preventDefault();
      closeCover();
    }

    todoNewEl.onclick = function (e){
      e.stopPropagation();
      closeCover();
      createTodoNotes();
    }
    timeNewEl.onclick = function (e){
      e.stopPropagation();
      closeCover();
      createTimeNotes();
    }
    textNewEl.onclick = function (e){
      e.stopPropagation();
      closeCover();
      createTextNotes();
    }
    // 重命名
    const rename = (e) => {
      e.stopPropagation();
      notesNameEl.contentEditable = 'plaintext-only';
      notesNameEl.focus();
      window.isfocus = true;
    }

    notesNameEl.onmousedown = (e) => e.stopPropagation();
    
    notesNameEl.ondblclick = rename;
    notesNameEl.onblur = (e) => {
      notesNameEl.contentEditable = 'false';
      notesNameEl.scrollTo(0,0);
      data.list[tagMenuIndex].name = e.target.innerText;
      window.renderTags();
      window.blurHandle(e);
    }

    notesNameEl.onkeydown = (e) => {
      if(e.keyCode === 13 && !e.target.innerText.trim()){
        e.preventDefault();
        return;
      }
      if(e.keyCode === 13 && e.target.innerText.trim()){
        e.preventDefault();
        notesNameEl.contentEditable = 'false';
        notesNameEl.scrollTo(0,0);
        data.list[tagMenuIndex].name = e.target.innerText;
        window.renderTags();
      }
    }

    deleteItemEl.onclick = (e) => {
      e.stopPropagation();
      if(data.list.length === 1)return;
      let arr = data.list.splice(tagMenuIndex, 1);
      let id = arr[0].id;
      
      if(id === data.id){
        data.id = data.list[0].id;
      }
      renderView();
      closeCover();
      if(window.sendSaveData){
        window.sendSaveData(data);
      }
    }

    const notesChange = (e) => {
      let index = data.list.findIndex(item => item.id === data.id);
      data.list[index].data = e.detail.value;
      if(window.sendSaveData){
          window.sendSaveData(data);
      }
    }

    todoNotesEl.onchange = notesChange;
    timeNotesEl.onchange = notesChange;
    textNotesEl.onchange = notesChange;


    renderView();
  </script>
</html>
